<template>
  <div>
    <p>a={{ a }}</p>
    <p>b={{ b }}</p>
    <!-- 用法：计算属性直接调用不能加()优点：是页面代码看起来更加简洁
    有缓存机制，性能浪费少 -->
    <p>a+b={{ a + b }}</p>
    <p>a+b={{ total() }}</p>
    <p>a+b={{ total() }}</p>
    <p>a+b={{ total() }}</p>
    <p>a+b={{ sum }}</p>
    <p>a+b={{ sum }}</p>
    <p>a+b={{ sum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
      b: 2,
    };
  },
  methods: {
    total() {
      console.log(666);
      return this.a + this.b;
    },
  },
  computed: {
    // 有缓存 提高1性能
    sum() {
      console.log(888);
      return this.a + this.b;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>